<template>
    <div class="wrap">
        <div class="container">
            <div class="from-box" ref="form_box">
                <!-- 注册 -->
                <div class="register-box hidden" ref="register_box">
                    <h1>register</h1>
                    <input type="text" v-model="registerForm.name" placeholder="用户名">
                    <input type="email" v-model="registerForm.email" placeholder="邮箱">
                    <input type="text" v-model="registerForm.phone" placeholder="手机号">
                    <input type="password" v-model="registerForm.password" placeholder="密码">
                    <input type="password" v-model="registerForm.checkPassword" placeholder="确认密码">
                    <input type="text" v-model="registerForm.checkCode" placeholder="验证码">
                    <div style="border: #6a62ad solid 1px;border-radius: 4px;
                    position: absolute;bottom: 74px;right: 50px;color: #ffffff;
                    font-size: 14px;background-color: #3d8e31" v-loading.fullscreen="fullscreenLoading"
                         @click="getCheckCode" v-show="CodeCheck.canGet">
                        {{CodeCheck.checkButtonContent}}
                    </div>
                    <div style="border: #6a62ad solid 1px;border-radius: 4px;
                    position: absolute;bottom: 74px;right: 50px;color: #ffffff;
                    font-size: 14px;background-color: #3d8e31" v-show="!CodeCheck.canGet">
                        {{CodeCheck.checkButtonContent}}
                    </div>
                    <button @click="register" style="margin-top: 15px">注册</button>
                </div>
                <!-- 登录 -->
                <div class="login-box" ref="login_box">
                    <h1>login</h1>
                    <input type="text" v-model="loginForm.email" placeholder="邮箱">
                    <input type="password" v-model="loginForm.password" placeholder="密码" @keyup.enter="login">
                    <button @click="login">登录</button>
                    <router-link to="/forgetPasswd" style="color: #f6f6f6;margin-top: 50px">已有账号，忘记密码?</router-link>
                </div>
            </div>
            <div class="con-box left">
                <h2>欢迎来到<span>健身管理</span></h2>
                <img src="../assets/undraw_indoor_bike_pwa4.png" style="width: 210px">
                <p>已有账号</p>
                <button @click="goLogin">去登录</button>
            </div>
            <div class="con-box right">
                <h2>欢迎来到<span>健身管理</span></h2>
                <img src="../assets/undraw_pilates_gpdb.png" style="width: 210px">
                <p>没有账号?</p>
                <button @click="goRegister">去注册</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {getCheckCode, register, login} from '@/utils/apis/loginAndRegister' ;

    export default {
        name: "Login",
        data() {
            return {
                //验证码加载动画
                fullscreenLoading: false,
                //登录表单
                loginForm: {
                    email: '',
                    password: ''
                },
                //注册表单
                registerForm: {
                    name: '',
                    email: '',
                    phone: '',
                    password: '',
                    checkPassword: '',
                    checkCode: ''
                },
                CodeCheck: {
                    canGet: true,
                    //获取验证码按钮文字内容
                    checkButtonContent: '获取验证码',
                    //验证码定时器
                    timer: null,
                    //倒计时
                    TimeCount: 60
                }

            }
        },
        methods: {
            goLogin() {
                this.$refs.form_box.style.transform = 'translateX(0%)';
                this.$refs.login_box.classList.remove('hidden');
                this.$refs.register_box.classList.add('hidden');
            },
            goRegister() {
                this.$refs.form_box.style.transform = 'translateX(80%)'
                this.$refs.login_box.classList.add('hidden')
                this.$refs.register_box.classList.remove('hidden')
            },
            //获取验证码
            async getCheckCode() {
                this.fullscreenLoading = true
                if (this.registerForm.email !== '') {
                    // 发起请求
                    await getCheckCode(this.registerForm.email).then(res => {
                        // 如果验证码发送成功
                        if (res.data.code === 200) {
                            this.$message.success("验证码发送成功")
                            this.fullscreenLoading = false
                            this.CodeCheck.canGet = false;
                            this.CodeCheck.TimeCount = 60;
                            this.loading()
                            this.timer = setInterval(() => {
                                this.loading()
                                if (this.CodeCheck.TimeCount === 0) {
                                    this.clearTimer();
                                }
                            }, 1000)
                        } else {
                            this.$message.error("验证码发送出错")
                        }
                    })
                } else {
                    this.$message.warning('您还未填写邮箱信息');
                }
            },
            loading() {
                this.CodeCheck.TimeCount--;
                this.CodeCheck.checkButtonContent = this.CodeCheck.TimeCount + "秒后可重新获取"
            },
            clearTimer() {
                this.CodeCheck.canGet = true;
                //清除定时器
                clearInterval(this.timer);
                this.timer = null;
                this.CodeCheck.checkButtonContent = "获取验证码";
            },
            //注册新的管理员
            register() {
                console.log(this.hasFullWrite(this.registerForm))
                if (this.hasFullWrite(this.registerForm)) {
                    register(this.registerForm).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success("注册成功，欢迎使用，请登录")
                            this.goLogin()
                        }
                    })
                } else {
                    this.$message.warning("请完整填写表单")
                }
            },
            //是否已经完整填写
            hasFullWrite(obj) {
                // 开始遍历
                for (let p in obj) { // 方法
                    if (typeof (obj [p]) == " function ") {
                        obj [p]();
                    } else { // p 为属性名称，obj[p]为对应属性的值
                        if (obj[p] === '') {
                            return false
                        }
                    }
                }
                return true
            },
            login() {
                if (this.hasFullWrite(this.loginForm)) {
                    login(this.loginForm).then(res => {
                        if (res.data.code === 200) {
                            //缓存token
                            let accessToken = res.data.data.token;
                            localStorage.setItem('token', accessToken)
                            //缓存用户信息
                            this.$store.state.adminInfo = res.data.data.info
                            localStorage.setItem("adminInfo", JSON.stringify(res.data.data.info))
                            //提示登录成功
                            this.$message.success('登录成功!')
                            //跳转页面至首页
                            setTimeout(() => {
                                this.$router.replace('/home')
                            }, 1000)
                        }
                    })
                } else {
                    this.$message.warning("请完整填写表单!")
                }
            },

        }
    }
</script>

<style scoped>
    .wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../assets/background.jpeg");
    }

    .container {
        background-color: #fff;
        width: 760px;
        height: 415px;
        /* 阴影 */
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
        /* 相对定位 */
        position: relative;
        border-radius: 5px;
    }

    .from-box {
        /* 绝对定位 */
        position: absolute;
        top: -10%;
        left: 12%;
        background-color: #202478;
        width: 320px;
        height: 500px;
        border-radius: 5px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        /* 弹性布局 水平+垂直居中 */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        /* 动画过渡 加速之后 减速 */
        transition: 0.5s ease-in-out;
    }

    .register-box, .login-box {
        /* 弹性布局 垂直排列 */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
    }

    .register-box div:hover {
        cursor: pointer;
        background-color: #202478;
    }

    .hidden {
        display: none;
        transition: 0.5s;
    }

    h1 {
        text-align: center;
        margin-bottom: 15px;
        /* 大写字母 */
        text-transform: uppercase;
        color: #fff;
        /* 字间距 */
        letter-spacing: 5px;
    }

    input {
        background-color: transparent;
        width: 70%;
        color: #fff;
        border: none;
        /* 下边框样式 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding: 10px 0;
        text-indent: 10px;
        margin: 8px 0;
        font-size: 14px;
        /* 字间距 */
        letter-spacing: 2px;
    }

    input::placeholder {
        color: #fff;
    }

    input:focus {
        color: #6a62ad;
        outline: none;
        border-bottom: 1px solid rgba(98, 117, 173, 0.5);
        transition: 0.5s;
    }

    input:focus::placeholder {
        opacity: 0;
    }

    .from-box button {
        width: 70%;
        margin-top: 35px;
        background-color: #f6f6f6;
        outline: none;
        border-radius: 8px;
        padding: 13px;
        color: #202478;
        letter-spacing: 2px;
        border: none;
        cursor: pointer;
    }

    .from-box button:hover {
        background-color: #202478;
        color: #f6f6f6;
        transition: background-color 0.5s ease;
    }

    .con-box {
        width: 50%;
        /* 弹性布局 垂直排列 居中 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* 绝对定位 */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .con-box.left {
        left: -2%;
    }

    .con-box.right {
        right: -2%;
    }

    .con-box h2 {
        color: #8e9aaf;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 3px;
        text-align: center;
        margin-bottom: 4px;
    }

    .con-box p {
        font-size: 12px;
        letter-spacing: 2px;
        color: #8e9aaf;
        text-align: center;
    }

    .con-box span {
        color: #202478;
    }

    .con-box img {
        width: 150px;
        height: 150px;
        opacity: 0.9;
        margin: 40px 0;
    }

    .con-box button {
        margin-top: 3%;
        background-color: #fff;
        color: #202478;
        border: 1px solid #0f2c99;
        border-radius: 10px;
        padding: 6px 10px;
        letter-spacing: 1px;
        outline: none;
        /* 鼠标放上变小手 */
        cursor: pointer;
    }

    .con-box button:hover {
        background-color: #202478;
        color: #f6f6f6;
    }

</style>